<template>
  <Transition name="slide-left">
    <div v-if="showDetials" class="details">
      <PageHead @back="showDetials = false" @more="deleteContact"> </PageHead>
      <section class="flex info-section flex-col">
        <div class="flex gc-6 user-info">
          <div>
            <img src="https://api.multiavatar.com/any.png" width="46" />
          </div>
          <div class="flex flex-col gr-2">
            <div class="text-16 text-bold text-222">
              {{ currentContact?.name }}
            </div>
            <div class="text-666">微信号：{{ currentContact?.wx }}</div>
            <div class="text-666">地区：{{ currentContact?.area }}</div>
          </div>
        </div>
      </section>

      <section>
        <List title="设置备注和标签"></List>
        <List title="电话号码" :show-arrow="false"></List>
        <List title="朋友权限"></List>
      </section>

      <section class="mt-8">
        <List title="朋友权限"></List>
        <List title="更多信息"></List>
      </section>
      <section class="mt-8">
        <div class="section-item" @click="sendMsg">
          <img :src="msgPng" width="20" /> 发消息
        </div>
        <div class="section-item">
          <img :src="video" width="20" /> 音视频通话
        </div>
      </section>
    </div>
  </Transition>
</template>

<script setup lang="ts">
  import PageHead from '@/views/components/page-head/PageHead.vue';
  import List from '@/views/components/list/List.vue';
  import {
    currentMessage,
    showMessage,
  } from '@/views/components/message/message';
  import { notify } from '@/views/components/notify/notify';
  import { getUserStore } from '@/store/user/utils';
  import { showLoading } from '@/views/components/loading/loading';
  import msgPng from '../asstes/message.png';
  import video from '../asstes/video.png';
  import { currentContact, showDetials } from './details';
  import { showContactMessage } from '../settings/settings';

  const sendMsg = () => {
    showMessage.value = true;
    if (!currentContact.value) return;
    currentMessage.value = {
      title: currentContact.value.name || '',
      avatar: currentContact.value.avatar || '',
      time: ',',
      unread: false,
      lastMessage: '',
      sort: 0,
      type: 'sole',
      disturb: false,
      topping: false,
      id: currentContact.value.id || '',
      show: false,
      messageList: currentContact.value.message,
    };
  };
  const deleteContact = () => {
    notify({
      show: true,
      title: '警告',
      cancleText: '取消',
      content: '确定删除该联系人吗？',
      onConfirm() {
        if (currentContact.value) {
          const store = getUserStore();
          store.contacts = store.contacts.filter((item: any) => {
            return item.id !== currentContact.value?.id;
          });
          showDetials.value = false;
          showLoading({ type: 'feedback', text: '删除成功' });
        }
      },
      type: 'danger',
    });
  };
</script>

<style lang="scss" scoped>
  .details {
    position: absolute;
    left: 0;
    height: 100vh;
    background-color: var(--background-color);
    top: 0%;
    width: 100%;
    z-index: 10;
    .info-section {
      background-color: white;
      padding-left: 16px;
    }
    .user-info {
      padding: 24px 0;
      border-bottom: 1px solid var(--border-color);
    }
    section {
      background-color: white;
      padding-left: 8px;
    }
    .section-item {
      text-align: center;
      line-height: 42px;
      border-bottom: 1px solid var(--border-color);
      color: #4c6491;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      font-weight: bold;
      &:last-child {
        border: none;
      }
    }
  }
</style>
